<template>
    <view class="page">
        <view class="list" v-if="select == ''">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view> {{ item.username }}</view>
                <view @click="edit(item)">
                    <view style="margin-top: 30rpx;"><u-icon name="edit-pen-fill" color="#007aff" size="16"></u-icon>
                    </view>
                </view>
                <view @click="del(item.id)">
                    <view style="margin-top: 30rpx;"><u-icon name="trash" color="red" size="16"></u-icon></view>
                </view>
            </view>
        </view>
        <view v-else>
            <view class="items" v-for="(item, index) in list" :key="index" @click="check(index)">
                <view>{{ item.username }}</view>
                <view>
                    <image :src="item.isTrue == true ? '/static/true.png' : '/static/false.png'" mode="scaleToFill" />
                </view>
            </view>
            <view class="btn" @click="selectBack">确认选择</view>
        </view>
        <view style="margin-top: 300rpx;" v-if="list.length == 0">
            <u-empty mode="data" text="暂无数据～">
            </u-empty>
        </view>
        <view class="add" @click="add">+</view>
        <u-modal :show="show" :title="title" :showCancelButton="true" @confirm="submit">
            <view class="box">
                <input type="text" placeholder="请输入用户名" v-model="name">
            </view>
			<view class="box">
			    <input type="text" placeholder="请输入手机号" v-model="mobile">
			</view>
        </u-modal>
    </view>
</template>

<script>
import { rolelist, shoproleadd, roledelete } from "@/api/user.js"
export default {
    components: {},
    props: {},
    data() {
        return {
            keyword: '',
            page: 1,
            pagesize: 10,
            type: '3',
            list: [],
            title: '添加人员',
            show: false,
            name: '',
            id: '',
            select: '',
			phone:''
        };
    },
    watch: {},
    methods: {
        getList() {
            rolelist({
                page: this.page,
                pagesize: this.pagesize,
            }).then(res => {
                console.log(res)
                for (let i = 0; i < res.data.length; i++) {
                    res.data[i].isTrue = false;
                }
                if (this.page == 1) {
                    this.list = res.data
                } else {
                    this.list = this.list.concat(res.data)
                }
            })
        },
        add() {
            this.show = true;
        },
        del(id) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '确认删除吗?',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        roledelete({
                            roleIds: id
                        }).then(res => {
                            if (res.code == 1) {
                                uni.showToast({
                                    title: res.msg,
                                    icon: 'none',
                                    mask: true
                                })
                                _this.page = 1;
                                _this.list = []
                                _this.getList()
                            }
                        })
                    }
                }
            })
        },
        submit() {
            shoproleadd({
                username: this.name,
                id: this.id,
				mobile:this.mobile
            }).then(res => {
                console.log(res)
                uni.showToast({
                    title: '成功～',
                    icon: 'none',
                    mask: true
                })
                this.show = false;
                this.getList()
                this.id = '';
                this.name = ''
            })
        },
        edit(item) {
            this.id = item.id;
            this.name = item.username;
            this.show = true;
            this.title = '编辑信息'
        },
        check(index) {
            if (this.list[index].isTrue) {
                this.list[index].isTrue = false;
            } else {
                this.list[index].isTrue = true
            }
        },
        selectBack() {
            let arr = []
            for (let i = 0; i < this.list.length; i++) {
                // const element = array[i];
                if (this.list[i].isTrue == true) {
                    arr.push({
                        name: this.list[i].username,
                        id: this.list[i].id
                    })
                }
            }
            const eventChannel = this.getOpenerEventChannel();
            // 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
            eventChannel.emit('someEvent', { data: arr });
            // 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
            uni.navigateBack({
                delta: 1
            });
        }
    },
    onReachBottom() {
        if (this.list.length > 10) {
            this.page++;
            this.getList()
        }
    },
    onShow() {
        this.page = 1;
        this.list = []
        this.getList()
    },
    onLoad(option) {
        if (option.select) {
            this.select = option.select
        }
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.page {
    // background-color: #efefef;
    width: 100%;
    min-height: 100vh;
}

.search {
    width: 94%;
    left: 3%;
    margin: auto;
    // margin-top: 30rpx;
    height: 80rpx;
    position: fixed;
    background-color: #fff;
    top: 0rpx;
    z-index: 99999;
}

.list {
    width: 94%;
    margin: auto;
    margin-top: 30rpx;
}

.item {
    width: 100%;
    height: 90rpx;
    background: #FFFFFF;
    border-bottom: 1px solid #efefef;
    display: flex;
    line-height: 90rpx;

    view:nth-child(1) {
        width: 70%;
        padding-left: 30rpx;
    }
}

.items {
    width: 100%;
    height: 90rpx;
    background: #FFFFFF;
    border-bottom: 1px solid #efefef;
    display: flex;
    line-height: 90rpx;

    view:nth-child(1) {
        width: 80%;
        padding-left: 30rpx;
    }

    view:nth-child(2) {
        width: 60rpx;
        height: 60rpx;
        margin-top: 15rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.add {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background-color: $uni-color-primary;
    position: fixed;
    bottom: 120rpx;
    font-size: 44rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    right: 30rpx;
}

.box {
    width: 94%;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;

    input {
        width: 100%;
        height: 100%;
    }

    border-bottom: 1px solid #efefef;
}

.btn {
    width: 94%;
    height: 90rpx;
    border-radius: 50rpx;
    position: fixed;
    left: 3%;
    text-align: center;
    line-height: 90rpx;
    background-color: $uni-color-primary ;
    color: #fff;
    bottom: 200rpx;
}
</style>